<template>
    <div class="goodsinfo-content">
       <transition @before-enter="beforeEnter"
       @enter="enter"  @after-enter="afterEnter"
       > 
            <!-- 制作小球 -->
        <div class="ball" v-show="isShow" ref="ball"></div>
       </transition>  
        <div class="mui-card">
                    <div class="mui-card-content">
                        <!-- <div class="mui-card-content-inner">
                            这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
                        </div> -->
                        <swiper :listData="goodsimg" :isfull="false"></swiper>
                    </div>
        </div>
        <div class="mui-card" v-for="item in [goodsinfo]" :key="item.title">
				<div class="mui-card-header">{{ item.title }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">市场价 : <del>¥{{ item.market_price }}</del>&nbsp;&nbsp; 销售价 : <span class="new_price"> ¥{{ item.sell_price }}</span></p>
                        <!-- 父组件再向子组件传值stock_quantity,剩余数量 -->
                        <p class="num">购买数量: <goodsinfoNumber class="goods" @getSum="getSum" :max="goodsinfo.stock_quantity"></goodsinfoNumber></p> 
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="changeShow">加入购物车</mt-button>
					</div>
				</div>
		</div>
        <div class="mui-card" v-for="item in [goodsinfo]" :key="item.id">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号: {{ item.goods_no }}</p>
                        <p>库存情况: {{ item.stock_quantity }}</p>
                        <p>上架时间: {{ item.add_time | filters }}</p>
                        <mt-button type="primary" size="large" plain class="bttton-photos" @click="goGoodsDesc(id)">图文介绍</mt-button>
                        <mt-button type="danger" size="large" plain class="button-comments" @click="goGoodsComment(id)">商品评论</mt-button>
					</div>
				</div>
		</div>
    </div>
</template>

<script>
//引入轮播图组件
import swiper from '../subcomponent/swiper.vue'
//引入加减框的组件
import goodsinfoNumber from '../subcomponent/goodsinfo-number.vue'
    export default {
        data: function(){
            return {
                id: this.$route.params.id,
                goodsimg: [],
                //商品信息
                goodsinfo: {},
                isShow: false,
                inputSum: 1 //input输入框的值，默认是1
            }
        },
        created: function(){
            this.getGoodsById()
            this.getGoodsinfo()
        },
        methods: {
            getGoodsById: function(){
                this.$http.get('http://127.0.0.1:4000/getGoodsById?id='+this.id).then( res => {
                    //  console.log(res.body.goodsimg)
                      this.goodsimg= res.body.goodsimg
                })
            }, 
            //获取商品信息
            getGoodsinfo: function(){
                 this.$http.get('http://127.0.0.1:4000/getGoodsinfo?id='+this.id).then( res => {
                    //  console.log(res.body)
                    this.goodsinfo= res.body.goodsinfo[0] 
                    // console.log(this.goodsinfo[0].stock_quantity)
                    })
            },
            goGoodsDesc: function(id){
                this.$router.push({ name: 'goodsDesc',params: {id: id}})
            },
            goGoodsComment: function(id){
                this.$router.push({ name: 'goodsComment',params: {id: id}})
            },
            //点击加入购物车，让小球显示
            changeShow: function(){
                this.isShow = !this.isShow
                //创建一个对象,将购买的商品放在对象里面
                var product= {
                    id: this.id,
                    price: this.goodsinfo.sell_price,
                    count: this.inputSum,
                    //默认被选中（选中付款）
                    selectd: true
                }
                this.$store.commit('StoreCar',product)
                // console.log(this.)
            },
            //动画的钩子函数，由于是半程动画，所以需要用钩子函数
            beforeEnter: function(el){
              el.style.transform= "translate(0,0)"
            },
            enter: function(el,done){
                var ball= this.$refs.ball.getBoundingClientRect()
                var badge = document.getElementById('badge').getBoundingClientRect()
                var w= badge.left - ball.left
                var h= badge.top - ball.top
                el.offsetWidth
                el.style.transform= `translate(${w}px, ${h}px)`
                el.style.transition= "all 1s ease"
                done()
            },
            afterEnter: function(el){
                this.isShow= !this.isShow 
            },
            //由于需要输入框的值，涉及到子组件向父组件传值，所以需要用方法传递值
            getSum: function(data){
                this.inputSum= data
            }
           
        },
        components: {
            swiper: swiper,
            goodsinfoNumber: goodsinfoNumber
        }
    }

</script>

<style lang="scss" scoped>
    .goodsinfo-content{
        background-color: #eee;
        overflow: hidden;
        // position: relative;
        .ball {
            width: 15px;
            height: 15px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 144px;
            top: 356px;
            z-index: 99;
        }
    }
    .mui-card-content-inner{
        .price{
            color: #888;
            font-size: 14px;
            margin: 0;
            line-height: 30px;
            .new_price {
                font-weight: 700;
                color: red;  
            }
        }
        .num {
            color: #888;
            font-size: 14px;
            margin-bottom: 10px; 
            line-height: 33px; 
            position: relative;

           .goods{
               position: absolute;
               bottom: 0;
               left: 65px;
           }
        }
    }
    .bttton-photos , .bttton-comments {
        margin: 15px 0;
    }
</style>